<template>
<div class="ms-wrap">
    <div class="ms-login">
        <div class="ms-title">学生登录</div>
        <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
            <el-form-item prop="sno">
                <el-input v-model="param.sno" placeholder="学号"> </el-input>
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model="param.name" placeholder="姓名"> </el-input>
            </el-form-item>
            <el-form-item prop="academy">
                <el-input v-model="param.academy" placeholder="学院"> </el-input>
            </el-form-item>
            <el-form-item prop="major">
                <el-input v-model="param.major" placeholder="专业"> </el-input>
            </el-form-item>
            <el-form-item prop="class">
                <el-input v-model="param.class" placeholder="班级"> </el-input>
            </el-form-item>
            <div class="ms-notice">点击确认前请阅读弹出的mbti测试须知</div>
            <div class="login-btn">
                <el-tooltip placement="top">
                    <template #content> MBTI测试前须知<br>
                        1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。 <br>
                        2、《性格分析报告》展示的是你的性格倾向，而不是你的知识、技能、经验。 <br>
                        3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。
                        <br>
                        清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。<br>
                        4、本测试分为四部分，共93题；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择。 <br>
                    </template>
                    <el-button type="primary" round @click="submit">确认</el-button>
                </el-tooltip>
            </div>
            <div  class="re-login-btn">
                <el-button type="primary" plain round @click="returnlogin">返回管理员登录</el-button>
            </div>
        </el-form>
    </div>
</div>
    
</template>

<script>
export default {
    data() {
        return {
            param: {
                sno: "",
                name: "",
                academy: "",
                major: "",
                class: "",
            },
            rules: {
                sno: [{ required: true, message: "请输入学号", trigger: "blur" }],
                name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                academy: [{ required: true, message: "请输入学院", trigger: "blur" }],
                major: [{ required: true, message: "请输入专业", trigger: "blur" }],
                class: [{ required: true, message: "请输入班级", trigger: "blur" }]
            },
        };
    },
    methods: {
        submit() {
            this.$refs.login.validate((valid) => {
                if (valid) {
                    this.$message.success("输入成功");
                    console.log("true");
                    this.$router.push("/StudentHome/MbtiTest");
                } else {
                    console.log("false");
                    alert("错误，请重新输入！");
                }
            });
        },
        returnlogin(){
            this.$router.push("/")
        }
    },
};
</script>

<style scoped>
.ms-wrap {
  height: 97.6vh;
  background:#9cd6fa;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 25px;
    color: #23a3b7;
    border-bottom: 1px solid #23a3b7;
}
.ms-notice {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #23a3b7;
}

.ms-login {
    position: absolute;
    left: 48%;
    top: 35%;
    width: 400px;
    padding: 40px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: #e0f1fc;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.ms-content {
    padding: 30px 30px;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.re-login-btn {
    text-align: center;
}

.re-login-btn button {
    width: 100%;
    height: 36px;
    margin-top: 20px;
}
</style>